

<template>
  <div ref="resolutionVoteRef" :style="{ width: '900px', height: '400px' }">
  </div>
</template>

<script setup lang="ts">
      import { onMounted, ref , defineProps , withDefaults  } from "vue";
      import * as echarts from "echarts";
      import { getVoteInfoApi } from "@/controller/ResolutionApi"


      let resolutionVoteRef = ref(null);
      interface Props {
        resolutionId : string;
        title: string;
      }

      let parent = withDefaults(defineProps<Props>(),{});

      onMounted(()=> {
          initVote();
      });



      let resolutionVote = echarts;


      function initVote() {
        if (resolutionVoteRef.value) {
          let chart = resolutionVote.init(resolutionVoteRef.value);
          getVoteInfoApi(parent.resolutionId).then( res =>{
            if(res.code == 200) {
              chart.setOption({
                title: {
                  text: parent.title + '投票结果'
                },
                tooltip: {},
                xAxis: {
                  data: res.data.map( item => item.label),
                },
                yAxis: { // 添加这一行来显式定义 yAxis
                  type: 'value'
                },
                series: [{
                  name: '获得票数',
                  type: 'bar',
                  barRoundness: 12,
                  itemStyle: {
                    borderRadius: [21, 21, 0, 0],
                    opacity: 0.7
                  },
                  barWidth: 12,
                  data: res.data.map( item => item.value)
                }]
              });
            }
          });
        }
      }

</script>

<style scoped lang="scss">

</style>
